import { useEffect } from 'react';
import { IRouteComponentProps ,PageModelState,useDispatch ,useSelector ,ArticleModelState, NavLink, CommentModelState} from "umi";

const map:{[key:string]:string} ={
    'msgboard':'2c1794cc-10d8-4d48-adda-7ff02371aee8',
    'about':'8f3973e9-4ed4-4849-ad85-b7d3b8093623'
}



const Page: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => { 
  const dispatch = useDispatch();
  const { pageItem, CommentItem, articleRecomment } = useSelector((state: { article: ArticleModelState, page: PageModelState,comment:CommentModelState }) => ({ ...state.article, ...state.page ,...state.comment}))

  useEffect(() => {
    // 获取页面详情
    dispatch({
      type: 'page/getPageView',
      payload: '8f3973e9-4ed4-4849-ad85-b7d3b8093623'
    })
    // 获取评论列表
    dispatch({
      type: 'comment/getArticleCommentList',
      payload: '8f3973e9-4ed4-4849-ad85-b7d3b8093623'
    })
    // 获取推荐列表
    dispatch({
      type: 'article/getArticleRecommend'
    })
  }, [])

  return <div className="_10wT67E6AAzqcEqLI7jUbZ">

    <div className='_3GUiOO804xme2-agc9WfvC'>
      {/* 文章内容 */}
      <h2>
        <div><img src={pageItem.cover} alt="" /></div>
      </h2>


      <div className='markdown'>
        {/* <h2> */}
        <div ></div>
          <div dangerouslySetInnerHTML={{ __html: pageItem.html }}></div>
        {/* </h2> */}

      </div>

      <div>
        <p className='commit'>评论</p>
      </div>

      <div className='_3E53JQDjSQhUYjr-yCJTky'>
        {/* 评论 */}
        <div className='box'>
          {CommentItem.map(item => {
            return <li key={item.id}>
              <header>
                <p className='_3xprCsLyoqZkArtvYiuAJU' style={{ fontWeight: ' bolder' }}>{item.name}</p>
              </header>

              <main style={{ 'padding': '12px 0px 12px 40px' }}>
                <div>
                  <p className='due7dhiendjec'>{item.content}</p>
                  <p className='active'>{item.userAgent}{ ' · 6个月前 回复'}</p>
                </div>

              </main>


            </li>
          })}
        </div>
      </div>



      {/* 推荐文章 */}
      {
              articleRecomment.map(item => {
                return <div key={item.id} className="list">
                  <NavLink to={`/article/${item.id}`}>
                    <header>
                      <div className='font'>{item.title}</div>
                      <div>6个月前</div>
                      <div>{item.category.label}</div>
                    </header>
                  </NavLink>
                  <NavLink to={`/article/${item.id}`}>
                  <main>
                    <div className='articleImg'>
                      <img src={item.cover} alt="" />
                    </div>
                    <div className='listPage'>
                      <div className='listTitle'>{item.summary}</div>
                      <div>
                        <span>
                          <span role="img" aria-label="heart" className="anticon anticon-heart">
                            <svg viewBox="64 64 896 896" focusable="false" data-icon="heart" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"></path></svg></span>
                          <span >0</span></span><span
                          >·</span><span>
                          <span role="img" aria-label="eye" className="anticon anticon-eye"><svg viewBox="64 64 896 896" focusable="false" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>
                          <span >259</span></span>
                        <span>·</span>
                        <span><span><span role="img" aria-label="share-alt" >分享</span></span></span></div>
                    </div>
                  </main>
                  </NavLink>
                </div>
              })
            }


    </div>
  </div>

};

export default Page;
